@import 'analytics/logs/logs';
@import 'analytics/overview/analytics';
@import 'audit/events/apiEvents';
@import 'audit/history/apiHistory';
@import 'deploy/deploy';
@import 'design/policies/policy';
@import 'design/properties/properties';
@import 'design/resources/resources';
@import 'proxy/backend/endpoint/endpoint';
@import 'proxy/backend/healthcheck/healthcheck';
@import 'portal/plans/apiPlans';
@import 'portal/subscriptions/subscriptions';
@import 'portal/general/apiPortal';
@import 'portal/apis.portal.route';

.gravitee-api-container {
  border: 1px solid;
  border-radius: 10px;
  padding: 20px;
  margin: 0 auto;
  width: 80%;
}

.gravitee-api-save-button {
  display: block;
}

.content-header {
  margin-top: 60px;
  position: relative;
  padding: 15px 15px 0px;
}

.content-header h1 {
  margin: 10px;
  font-size: 24px;
}

.content-header h1 > small {
  font-size: 15px;
  display: inline-block;
  padding-left: 4px;
  font-weight: 300;
}

.demo-container {
  border-radius: 4px;
  margin-bottom: 16px;
  -webkit-transition: 0.02s padding cubic-bezier(0.35, 0, 0.25, 1);
  transition: 0.02s padding cubic-bezier(0.35, 0, 0.25, 1);
  position: relative;
  padding-bottom: 0;
}

.md-button.md-icon-button.md-icon-right {
  right: 0;
  position: absolute;
  border-radius: 0;
}

.gravitee-api-page-menu-item {
  cursor: pointer;
  padding: 4px;
  border: 1px solid lightgrey;
  border-radius: 3px;
  margin: 2px 0;
}

.gravitee-api-visibility {
  display: inline;
}

.gravitee-api-explanation {
  color: rgba(0, 0, 0, 0.26);
  text-align: center;
  position: relative;
  top: -20px;
}

.gravitee-api-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 400px;
  @media screen and (max-width: 1320px) {
    width: 260px;
  }
  @media screen and (max-width: 960px) {
    width: 200px;
  }
  @media screen and (max-width: 768px) {
    width: 100px;
  }
}

.gravitee-api-header {
  height: $graviteeHeader;
  //background: #fff;
  //border-bottom: 1px solid #f1f1f1;
  //box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
}

.gravitee-api-header-content {
  color: grey;
  //padding-left: 20px;
  //padding-right: 8px;
  width: 100%;
}

.gravitee-api-header-content ng-md-icon {
  fill: grey;
}

.api-box-footer {
  margin-top: 5px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding: 2px;
}

.gravitee-api-header-description {
  background-color: transparent;
}

.gravitee-api-header-read-more {
  height: 40px;
  color: grey;
}

.gravitee-api-header-image {
  background: #ffffff no-repeat center center;
  background-size: contain;
  margin: 0 20px 15px 0;
  min-width: 110px;
  max-width: 110px;
  min-height: 110px;
  max-height: 110px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(25, 25, 34, 0.12);
}

.gravitee-api-documentation-empty {
  font-size: 30px;
  opacity: 0.5;
  padding: 30px;
}

.gravitee-api-banner {
  position: fixed;
  font-weight: bold;
  width: 100%;
  z-index: 11;
}

.gravitee-api-banner-min {
  width: 100%;
}

.gravitee-api-banner-content {
  background: #dfa941;
  padding: 3px;
  text-align: center;
  color: white;
  line-height: 11px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.gravitee-api-banner-content:hover {
  background: #e8ac3c;
}

.gravitee-api-banner-content a {
  color: white;
  text-decoration: underline;
}

.hint {
  /* Position the hint */
  position: absolute;
  left: 2px;
  right: auto;
  bottom: -5px;
  /* Copy styles from ng-messages */
  font-size: 11px;
  line-height: 14px;
  transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  /* Set our own color */
  color: grey;
}

.gravitee-api-menu-action {
  padding-top: 0;
  position: absolute;
  right: 0;
  z-index: 1;
}

.gravitee-api-card {
  background: #fff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
}

.gravitee-api-card:hover {
  box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.37);
}

.apis-header-filter {
  width: 100%;

  input:focus {
    box-shadow: none;
    outline: 0 none;
  }
}

.gravitee-api-picture-container {
  margin-bottom: 20px;

  label {
    color: rgba(0, 0, 0, 0.54);
    font-size: 11px;
    margin-left: 3px;
    margin-bottom: 10px;
  }

  div.button {
    margin-left: 50px;
  }
}

.md-subheader .md-subheader-inner {
  border-bottom: 1px solid #d8d8d8;
  border-top: 1px solid #d8d8d8;
  margin-bottom: 5px;
  font-weight: bold;
}

.md-subheader .md-subheader-inner md-checkbox {
  margin-bottom: 0px;
}

.general_conditions_info {
  font-size: 12px;
  margin: 1rem;
  text-align: justify;
  color: gray;
}

span.proxy-activated {
  font-size: 11px;
  font-weight: normal;
  color: #00aa00;
}

span.proxy-deactivated {
  font-size: 11px;
  font-weight: normal;
  color: grey;
}

.md-subheader .md-subheader-inner .hints {
  /* Position the hint */
  left: 2px;
  right: auto;
  bottom: -5px;
  /* Copy styles from ng-messages */
  line-height: 14px;
  font-size: 11px;
  font-weight: normal;
  transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  /* Set our own color */
  color: darkslategrey;
}

.gravitee-general-description {
  font-size: 12px;
}

.gravitee-api-definition-dialog {
  span {
    text-transform: uppercase;
    line-height: 48px;
  }

  input[type='file'] {
    cursor: pointer;
  }
}

.highlight {
  color: black !important;
  font-weight: bolder !important;
}

api-creation {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.md-chips {
  font-size: 12px;
}

md-switch {
  margin: 0;
}

md-switch.md-default-theme.md-checked.md-primary .md-thumb,
md-switch.md-checked.md-primary .md-thumb {
  background-color: green;
}

md-switch.md-default-theme.md-primary .md-thumb,
md-switch.md-primary .md-thumb {
  background-color: #e00000;
}

md-switch.md-default-theme.md-checked .md-bar,
md-switch.md-checked .md-bar {
  background-color: lightgrey;
}

md-switch.md-default-theme .md-bar,
md-switch .md-bar {
  background-color: lightgrey;
}

.api-life-cycle {
  font-weight: 500;
  margin-left: 6px;
}

.selectdemoSelectHeader {
  /* Please note: All these selectors are only applied to children of elements with the 'selectdemoSelectHeader' class */
}

.selectdemoSelectHeader .demo-header-searchbox {
  border: none;
  outline: none;
  height: 100%;
  width: 100%;
  padding: 0;
}

.selectdemoSelectHeader .demo-select-header {
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12);
  padding-left: 10.667px;
  height: 48px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  width: auto;
}

.selectdemoSelectHeader md-content._md {
  max-height: 240px;
}

/**
 * Quality Metrics
 */
#qualityMetrics {
  //padding-left: 36px;
  //h5 {
  //  margin-bottom: 0;
  //}
}

.gravitee-qm-score {
}

.gravitee-qm-score-small {
  text-align: center;
  min-width: 42px;
  border: 1px solid;
  border-radius: 4px;
  padding: 6px;
  margin: 4px 0;
  display: inline-block;
  font-size: 0.8em;
}

.gravitee-qm-score-large {
  font-weight: bold;
  text-align: center;
  font-size: 3em;
  min-width: 100px;
  min-height: 100px;
  border: 4px solid;
  border-radius: 50px;
  padding: 18px 0 0 0;
  margin: 4px 0;
}

.gravitee-qm-score-bad {
  color: red;
  border-color: red;
}

.gravitee-qm-score-medium {
  color: rgb(232, 172, 60);
  border-color: rgb(232, 172, 60);
}

.gravitee-qm-score-good {
  color: #429f46;
  border-color: #429f46;
}

.gravitee-qm-metrics {
  padding-left: 8px;
}

.gravitee-qm-metrics-list {
}

.gravitee-qm-metrics-passed {
  font-style: italic;
  color: #cccccc;
  text-decoration: line-through;
}

.gravitee-qm-metrics-circular-box {
  margin-top: 10px;
}

.gravitee-qm-metrics-green-icon {
  fill: green;
}

.gravitee-qm-metrics-red-icon {
  fill: red;
}

.gravitee-listening-host md-autocomplete-wrap {
  box-shadow: none;
}

@mixin logHeader($color) {
  border: 1px solid $color;
  border-radius: 5px;
}

@mixin logResponsePanel($lighterColor, $darkerColor) {
  background-color: $lighterColor;
  border: 1px solid $darkerColor;
  > div:first-child {
    background-color: $darkerColor;
  }
}

.gv-log-request-header {
  @include logHeader(#b3e5fc);
}

.gv-log-response-header-1 {
  @include logHeader(black);
}

.gv-log-response-header-2 {
  @include logHeader(green);
}

.gv-log-response-header-3 {
  @include logHeader(#dbdb0a);
}

.gv-log-response-header-4 {
  @include logHeader(orange);
}

.gv-log-response-header-5 {
  @include logHeader(red);
}

.gv-log-response-panel {
  @include logResponsePanel(#e1f5fe, #b3e5fc);
}

.gv-log-response-panel-1 {
  @include logResponsePanel(#dadada, #cccccc);
}

.gv-log-response-panel-2 {
  @include logResponsePanel(#f1f8e9, #dcedc8);
}

.gv-log-response-panel-3 {
  @include logResponsePanel(#ffffc9, #dbdb0a);
}

.gv-log-response-panel-4 {
  @include logResponsePanel(#faddad, #ffc15a);
}

.gv-log-response-panel-5 {
  @include logResponsePanel(#ff9e9e, #f55d5d);
}
